<template>
  <div class="screen" ref="screen">
    <vue3-draggable-resizable v-model:x="rectangle.x" v-model:y="rectangle.y" v-model:w="rectangle.w" v-model:h="rectangle.h" @drag="onDrag" @resizing.stop="onResize" class="screen-region" v-if="isStarted || isFinished" @mousedown.stop="null" @mousemove.stop="null" @mouseup.stop="null" @dblclick.stop="finishedScreenShotCopy">
      <div class="screenshot-tools">
        <n-button-group>
          <n-button type="info">
            <template #icon>
              <n-color-picker size="small" :show-alpha="false" :modes="['hex']" placement="top" style="height: 18px">
                <template #label></template>
              </n-color-picker>
            </template>
          </n-button>
          <n-dropdown trigger="hover" :options="options" placement="top">
            <n-button type="info">
              <template #icon>
                <n-icon>
                  <DotMark />
                </n-icon>
              </template>
            </n-button>
          </n-dropdown>
          <n-button type="info">
            <template #icon>
              <n-icon>
                <Pen />
              </n-icon>
            </template>
          </n-button>
          <n-button type="info" @click="addText">
            <template #icon>
              <n-icon>
                <TextFont />
              </n-icon>
            </template>
          </n-button>
          <n-button type="info" @click="finishedScreenShotSave">
            <template #icon>
              <n-icon>
                <Save />
              </n-icon>
            </template>
          </n-button>
          <n-button type="info" @click="closeScreenShot">
            <template #icon>
              <n-icon>
                <Close />
              </n-icon>
            </template>
          </n-button>
          <n-button type="error" @click="finishedScreenShotCopy">
            <template #icon>
              <n-icon>
                <Check />
              </n-icon>
            </template>
          </n-button>
        </n-button-group>
      </div>
    </vue3-draggable-resizable>
  </div>
</template>

<script lang="ts">
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
import {
  DotMark,
  Checkmark as Check,
  Close,
  TextFont,
  Save,
  Pen
} from '@vicons/carbon'
import {
  Subtract
} from '@vicons/carbon'
import {Component, defineComponent, h, ref} from "vue";
import {NIcon} from "naive-ui";
export default defineComponent({
  components: {
    Vue3DraggableResizable, DotMark, Check, Close, TextFont, Save, Pen
  },
  setup(){
    return {
      rectangle: ref({
        x: 0,
        y: 0,
        w: 0,
        h: 0
      }),
      options: [
        {
          label: '细（2px）',
          key: '1',
          icon: loadIcon(Subtract),
        },
        {
          label: '中（5px）',
          key: "2",
          icon: loadIcon(Subtract),
        },
        {
          label: '粗（8px）',
          key: '3',
          icon: loadIcon(Subtract),
        },
        {
          label: '超粗（10px）',
          key: '4',
          icon: loadIcon(Subtract),
        }
      ],
      isStarted: ref(false),
      isFinished: ref(false)
    }
  },
  mounted() {
    // 开始选择截图区域
    this.$refs.screen.addEventListener('mousedown', (event) => {
      this.rectangle.x = event.clientX
      this.rectangle.y = event.clientY
      this.isStarted = true
    })
    // 移动鼠标变换截图区域
    this.$refs.screen.addEventListener('mousemove', (event) => {
      if(!this.isStarted){
        return
      }
      this.rectangle.w = event.x - this.rectangle.x
      this.rectangle.h = event.y - this.rectangle.y
    })
    // 结束选择截图区域
    this.$refs.screen.addEventListener('mouseup', (event) => {
      if(!this.isStarted){
        return
      }
      this.rectangle.w = event.x - this.rectangle.x
      this.rectangle.h = event.y - this.rectangle.y
      this.isStarted = false
      this.isFinished = true
    })
    // 按下Esc
    window.addEventListener('keyup', (event) => {
      if(event.keyCode == 27){
        this.closeScreenShot()
      }
    })
  },
  methods: {
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    },
    onResize(x, y, width, height){
      this.rectangle.x = x
      this.rectangle.y = y
      this.rectangle.w = width
      this.rectangle.h = height
    },
    addText(){

    },
    // 关闭屏幕截图
    closeScreenShot(){
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'close-screenshot',
        event: 'event',
        data: null
      })
    },
    // 完成屏幕截图
    finishedScreenShotCopy(){
      const rectangle = {
        x: this.rectangle.x,
        y: this.rectangle.y,
        width: this.rectangle.w,
        height: this.rectangle.h
      }
      this.isStarted = false
      this.isFinished = false
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'finished-screenshot-copy',
        event: 'event',
        data: rectangle
      })
    },
    // 完成屏幕截图
    finishedScreenShotSave(){
      const rectangle = {
        x: this.rectangle.x,
        y: this.rectangle.y,
        width: this.rectangle.w,
        height: this.rectangle.h
      }
      this.isStarted = false
      this.isFinished = false
      window.electron.ipcRenderer.invoke("renderer-to-main", {
        name: 'finished-screenshot-save',
        event: 'event',
        data: rectangle
      })
    }
  }
})

const loadIcon = (icon: Component) => {
  return () => h(NIcon, null, { default: () => h(icon) })
}
</script>

<style lang="less" scoped>
.screen{
  width: 100vw;
  height: 100vh;
  position: relative;
  .screen-region{
    background-color: rgba(204, 51, 68, .3);
    border: #cc3344 solid 1px;
    .screenshot-tools{
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 65535;
      background-color: #ffffff;
      padding: 5px;
      border-radius: 5px;
    }
  }
}
</style>
